<template>
  <div class="data-monitor">
    <div class="title"></div>
    <div class="main">
      <LineEcharts
        :echartsData="alarmTypeTrend"
        :color="['rgba(0, 177, 204, 0.7)', 'rgba(20, 108, 215, 0.7)']"
        :graphicColor="[
          ['rgba(0, 177, 204, 0.5)', 'rgba(0, 177, 204, 0.1)'],
          ['rgba(20, 108, 215, 0.5)', 'rgba(20, 108, 215, 0.1)'],
        ]"
      />
    </div>

    <div class="tab-box">
      <ComRadioTabA :tab="currentTab" :tab-list="tabList" @change="changeTime" />
    </div>

    <div class="select-box">
      <n-select v-model:value="selectValue" :options="selectData" class="!w-[180px]" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import ComRadioTabA from '@/components/tabComp/ComRadioTabA.vue';
import LineEcharts from '@/components/echarts/lineChart.vue';

const currentTab = ref('1');
const tabList = [
  { name: '1', label: '近30天' },
  { name: '2', label: '全部' }
];
const selectValue = ref('1');
const selectData = [
  {
    label: '物联网火警',
    value: '1',
  },
  {
    label: '物联网预警',
    value: '2',
  },
  {
    label: '物联网隐患',
    value: '3',
  },
];
const alarmTypeTrend = {
  label: ['6-25', '6-26', '6-27', '6-28', '6-29', '6-30', '7-1', '7-2'],
  data: [
    {
      name: '火警数',
      value: [80, 82, 120, 110, 99, 101, 111, 99],
    },
    {
      name: '火警单位',
      value: [90, 89, 97, 99, 100, 104, 108, 101],
    },
  ],
};

function changeTime(val: string) {
  currentTab.value = val;
}

defineComponent({ name: 'RealSecurity' });
</script>

<style scoped lang="scss">
.data-monitor {
  @apply relative w-full h-full;

  .title {
    @apply w-full h-[31px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-[252px] mt-[20px];
  }

  .tab-box {
    @apply absolute right-0 top-0;
  }

  .select-box {
    @apply absolute left-0 top-[50px];
  }
}
</style>
